<template>
  <a-layout-header :style="headerStyle">
    <a-affix :offset-top="top">
      <div class="top_navgation">
        <!-- 顶部导航栏 -->
        <div class="search">
          <a-row class="top_search">
            <a-col :span="12">
              <ul style="display: flex">
                <li style="font-size: 11px; font-weight: 200">
                  <router-link to="/"
                    ><HomeOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />首页</router-link
                  >
                </li>
                <li
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <router-link to="/register"
                    ><SendOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />免费注册</router-link
                  >
                </li>
              </ul>
            </a-col>
            <a-col :span="12">
              <ul style="display: flex">
                <li
                  v-if="isBusiness"
                  @click="toSystem"
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <a href="http://localhost:81">
                    <AppstoreOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />商家后台
                  </a>
                </li>
                <li
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <router-link @click="toCart" to=""
                    ><ShoppingCartOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />购物车</router-link
                  >
                </li>
                <li
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <a-dropdown>
                    <router-link to="/"
                      ><StarOutlined
                        style="
                          margin-right: 5px;
                          padding-top: 4px;
                          color: coral;
                        "
                      />收藏夹 <DownOutlined style="color: coral" />
                    </router-link>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item>
                          <router-link
                            style="font-size: 10px"
                            to="/collectgoods"
                            >收藏的宝贝</router-link
                          >
                        </a-menu-item>
                        <a-menu-item>
                          <router-link
                            style="font-size: 10px"
                            to="/collectstores"
                            >收藏的店铺</router-link
                          >
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </li>
                <li
                  @click="toPersonal"
                  style="margin-left: 20px; font-size: 11px; font-weight: 200"
                >
                  <router-link to="/"
                    ><DesktopOutlined
                      style="margin-right: 5px; padding-top: 4px; color: coral"
                    />个人中心</router-link
                  >
                </li>
              </ul>
            </a-col>
          </a-row>
        </div>
      </div>
    </a-affix>
  </a-layout-header>
  <a-layout-content>
    <div class="top_content">
      <div class="content">
        <a-spin :spinning="spinning" size="large">
          <a-card :bordered="false" style="height: auto; margin-top: 20px">
            <a-row>
              <a-col :span="19" style="height: auto">
                <div style="height: 60px">
                  <h2>搜索"{{ searchMsg }}"结果</h2>
                  <hr class="hr-first" />
                </div>
                <a-empty v-if="isData">
                  <template #description>
                    <span style="letter-spacing: 2px; font-size: 12px">
                      暂无<span style="color: coral; font-size: 13px"
                        >"{{ searchMsg }}"</span
                      >商品
                    </span>
                  </template>
                </a-empty>
                <div>
                  <div class="hot_card_every">
                    <router-link
                      to=""
                      v-for="(item, index) in goodsData"
                      :key="index"
                    >
                      <div class="card_box">
                        <router-link to="" @click="toGoodsDetail(item.key)">
                          <div>
                            <img
                              style="
                                border-radius: 10px;
                                width: 220px;
                                height: 220px;
                                object-fit: cover;
                              "
                              :src="item.image"
                              alt=""
                            />
                          </div>
                          <div style="margin-top: 10px; padding-left: 5px">
                            <h3 v-html="item.name"></h3>
                          </div>
                          <div>
                            <PayCircleOutlined :style="icon_pay_style" />
                            <span
                              style="
                                font-size: 20px;
                                color: #ff5000;
                                font-weight: bold;
                              "
                              >{{ towNumber(item.price) }}
                            </span>
                            <span
                              style="
                                margin-left: 10px;
                                font-size: 13px;
                                color: #606266;
                              "
                              >{{ item.sale }}人付款</span
                            >
                          </div>
                        </router-link>
                        <router-link to="" @click="toStore(item.storeId)">
                          <div style="margin-top: 10px">
                            <a-avatar :src="item.storeImage" />
                            <span style="margin-left: 10px">{{
                              item.store
                            }}</span>
                          </div>
                        </router-link>
                      </div>
                    </router-link>
                  </div>
                </div>
                <!-- 分页 -->
                <div
                  style="
                    height: 40px;
                    width: 100%;
                    margin-top: 30px;
                    display: flex;
                    justify-content: center;
                  "
                >
                  <a-pagination
                    v-model:current="pageNo"
                    v-model:page-size="pageSize"
                    :total="total"
                    @change="handlePageChange"
                  />
                </div>
              </a-col>
              <a-col :span="5" style="height: 90vh">
                <div class="line"></div>
                <h2 style="margin-left: 30px">猜你喜欢</h2>
                <hr class="hr-solid" />
                <div
                  style="
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                  "
                >
                  <router-link
                    to=""
                    v-for="(item, index) in likeGoods"
                    :key="index"
                  >
                    <div class="card_box">
                      <router-link to="" @click="toGoodsDetail(item.key)">
                        <div>
                          <img
                            style="
                              border-radius: 10px;
                              width: 220px;
                              height: 220px;
                              object-fit: cover;
                            "
                            :src="item.image"
                            alt=""
                          />
                        </div>
                        <div style="margin-top: 10px; padding-left: 5px">
                          <h3>{{ item.name }}</h3>
                        </div>
                        <div>
                          <PayCircleOutlined :style="icon_pay_style" />
                          <span
                            style="
                              font-size: 20px;
                              color: #ff5000;
                              font-weight: bold;
                            "
                            >{{ towNumber(item.price) }}
                          </span>
                          <span
                            style="
                              margin-left: 10px;
                              font-size: 13px;
                              color: #606266;
                            "
                            >{{ item.sale }}人付款</span
                          >
                        </div>
                      </router-link>
                      <router-link to="" @click="toStore(item.storeId)">
                        <div style="margin-top: 10px">
                          <a-avatar :src="item.storeImage" />
                          <span style="margin-left: 10px">{{
                            item.homeName
                          }}</span>
                        </div>
                      </router-link>
                    </div>
                  </router-link>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </a-spin>
      </div>
    </div>
  </a-layout-content>
</template>
<script setup>
import {
  StarOutlined,
  ShoppingCartOutlined,
  DownOutlined,
  DesktopOutlined,
  SendOutlined,
  HomeOutlined,
  AppstoreOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import router from "@/router";
import { ref, onMounted } from "vue";
import { useAuthorizationStore } from "@/stores/authorization";
import { useRoute } from "vue-router";
import { searchGoodsData,getLikeGoodsData } from "@/api/goods";

const route = useRoute();

const searchMsg = ref("");
searchMsg.value = route.query.msg;
const goodsIds = ref([]);
goodsIds.value = route.query.id;

const goodsData = ref([]);
const total = ref(0);
const pageNO = ref(1);
const pageSize = ref(20);
const spinning = ref(true);
const isData = ref(false);
onMounted(() => {
  setTimeout(() => {
    getGoodsDatas();
    spinning.value = false;
  }, 500);
  setTimeout(() => {
    getLikeDatas();
  }, 1000);
});

//获取分类下的商品数据
function getGoodsDatas() {
  if (goodsIds.value.length !== 0) {
    searchGoodsData(
      pageNO.value,
      pageSize.value,
      goodsIds.value,
      searchMsg.value
    ).then((res) => {
      if (res.code === 200 && res.data.data !== null) {
        goodsData.value = res.data.data;
        total.value = res.data.total;
      } else {
        isData.value = true;
      }
    });
  } else {
    isData.value = true;
  }
}

//获取猜你喜欢商品数据
const likeGoods = ref({});
const likePageNo = ref(1);
const likePageSize = ref(1);
function getLikeDatas() {
  if (total.value % 5 === 0) {
    likePageSize.value = 2;
  }
  getLikeGoodsData(likePageNo.value, likePageSize.value).then((res) => {
    if (res.code === 200) {
      likeGoods.value = res.data;
    }
  });
}

//监听分页变化
function handlePageChange(param1, param2) {
  pageNO.value = param1;
  pageSize.value = param2;
  getGoodsDatas();
  setTimeout(() => {
    getLikeDatas();
  }, 1000);
}

const authorizationStore = useAuthorizationStore();
const isBusiness = ref(false);

//跳往个人中心
function toPersonal() {
  if (authorizationStore.authorization) {
    router.push("/personal");
  } else {
    router.push("/login");
  }
}

//跳往购物车
function toCart() {
  if (authorizationStore.authorization) {
    router.push("/cart");
  } else {
    message.success("请先登录哦！");
    router.push("/login");
  }
}

//样式绑定
const headerStyle = {
  color: "#fff",
  height: "30px",
  paddingInline: "0px",
  lineHeight: "18px",
  backgroundColor: "#f4f4f5",
};

//跳转到商品详情页
function toGoodsDetail(id) {
  router.push({ name: "Detail", query: { id: id } });
}

const icon_pay_style = {
  fontSize: "20px",
  color: "#ff5000",
  marginRight: "5px",
};

//跳往商铺页
function toStore(id) {
  router.push({ name: "Shop", query: { id: id } });
}

//展示价格的小数方法
function towNumber(val) {
  return val.toFixed(2);
}
</script>
<style scoped>
a:hover {
  color: red;
}
.top_navgation {
  background-color: #fff;
  color: #303133;
}
.search {
  height: 30px;
  background-color: #f4f4f5;
}
.top_search {
  height: 30px;
  margin-left: 150px;
  margin-right: 150px;
  width: 80%;
  padding-top: 3px;
}
.top_serach {
  height: 100px;
  background-color: #fff;
  display: flex;
  margin-left: 141.5px;
  margin-right: 141.5px;
}

ul {
  list-style-type: none;
}

:deep(.slick-slide) {
  height: 310px;
  background: #364d79;
  overflow: hidden;
  border-radius: 10px;
}

.input_search {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: blue;
  width: 100%;
}

/* .ant-input ant-input-lg css-dev-only-do-not-override-b92jn9 */
:deep(.ant-input) {
  height: 50px;
  margin-top: 10px;
  border-color: coral;
  border-style: solid;
  border-width: 2.5px;
}

.search_button {
  border-color: coral;
  border-style: solid;
  border-width: 2.5px;
  height: 50px;
  margin-top: 10px;
  background-color: coral;
}

.top_content {
  height: auto;
  background-color: #ebeef5;
}
.content {
  padding-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
:deep(.ant-divider-horizontal) {
  margin: 0px;
}

.hr-solid {
  border: 0;
  border-top: 2px solid #ebeef5;
  margin-left: 30px;
  margin-bottom: 16px;
}
.hr-first {
  border: 0;
  border-top: 2px solid #ebeef5;
  margin-right: 30px;
}
.line {
  background: #ebeef5; /*背景色为浅灰色*/
  width: 2px; /*设置宽高*/
  height: 90vh;
  float: left; /*让此div与前面的并排显示*/
}

h2 {
  color: #303133;
  font-weight: bold;
  margin-left: 10px;
}

.card_box {
  border-radius: 5px;
  width: 220px;
  height: 370px;
  margin-bottom: 40px;
  opacity: 0.8;
  transition: all 0.3s;
  background-color: #fff;
}

.category_card_box {
  border-radius: 5px;
  width: 240px;
  height: 370px;
  margin-bottom: 20px;
  margin-top: 15px;
  opacity: 0.8;
  transition: all 0.3s;
  background-color: #fff;
}
.card_box:hover {
  box-shadow: 6px 6px 6px #c0c4cc, 6px 6px 6px #c0c4cc;
}

.category_card_box:hover {
  box-shadow: 6px 6px 6px #c0c4cc, 6px 6px 6px #c0c4cc;
}

/* 卡片css控制 */
:deep(.ant-card-body) {
  padding: 0;
}

h3 {
  white-space: wrap; /*超出的空白区域不换行*/
  font-weight: bold;
  color: black;
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
  -webkit-line-clamp: 2; /*在第几行显示...*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.hot_card_every {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>